<template>
  <el-form :model="item" ref="moForm" :rules="rules" label-width="130px">
    <el-form-item prop="name" label="院校名称">
      <el-input
        v-model.trim="item.name"
        placeholder="请输入院校名称"
      ></el-input>
    </el-form-item>
    <el-form-item prop="imageFile" label="图片">
      <el-button class="setimg" type="primary" @click="setImg"
        >选择图片</el-button
      >
      <br />
      <span class="imginfo">请选择.jpg/.png格式图片，大小不超过1M</span>
      <input
        type="file"
        accept=".jpg, .png"
        id="fileInput"
        @change="imgChange($event)"
      />
      <div class="imgbox">
        <img :src="iconImage" id="image" />
      </div>
    </el-form-item>
    <el-form-item prop="personName" label="院校负责人">
      <el-input
        v-model.trim="item.personName"
        placeholder="请输入院校负责人"
      ></el-input>
    </el-form-item>
    <el-form-item prop="address" label="院校地址">
      <el-input
        v-model.trim="item.address"
        placeholder="请输入院校地址"
      ></el-input>
    </el-form-item>
    <el-form-item prop="personMobile" label="院校负责人联系方式">
      <el-input
        v-model.trim="item.personMobile"
        placeholder="请输入联系方式"
      ></el-input>
    </el-form-item>
    <el-form-item prop="account" label="院校账号">
      <el-input
        v-model.trim="item.account"
        placeholder="请输入院校账号"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password" label="院校密码">
      <el-input
        v-model.trim="item.password"
        placeholder="请输入院校密码"
      ></el-input>
    </el-form-item>
    <el-form-item prop="route" label="路由权限">
      <el-checkbox-group
        v-model="routers"
        size="small"
        @change="checkboxChange"
      >
        <el-checkbox
          v-for="(i, ind) in allRouter"
          :key="ind"
          :label="i.meta.title"
          border
        ></el-checkbox>
        <!-- <el-checkbox label="备选项2" border disabled></el-checkbox> -->
      </el-checkbox-group>
    </el-form-item>

    <el-form-item prop="auth" label="发帖是否验证">
      <el-radio v-model="item.auth" label="0" border>不验证</el-radio>
      <el-radio v-model="item.auth" label="1" border>验证</el-radio>
    </el-form-item>
    <el-form-item prop="authTime" label="未认证结束时间" v-if="item.ban != 0">
          <el-date-picker
            v-model="item.authTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmitClick()">提交</el-button>
      <el-button @click="handleBackClick">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import allRouter from "../../router/allRouter";
export default {
  props: ["item"],
  data() {
    return {
      allRouter,
      reader: null,
      imgBase: "",
      iconImage: "",
      routers: [],
      routeStr: "",
      cates: [],
      rules: {
        name: [{ required: true, message: "请输入院校名称", trigger: "blur" }],
        account: [
          { required: true, message: "请输入院校账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入院校密码", trigger: "blur" },
        ],
        personName: [
          { required: true, message: "请选择位置", trigger: "blur" },
        ],
        imageFile: [{ required: true, message: "请选择图片", trigger: "blur" }],
        auth: [
          { required: true, message: "请选择是否验证", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入院校地址", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    obj() {
      return {
        name: this.item.name,
        avatar: this.item.avatar,
        address: this.item.address,
        personName: this.item.personName,
        personMobile: this.item.personMobile,
        account: this.item.account,
        password: this.item.password,
        authProportion: this.item.authProportion,
        auth: this.item.auth,
        imageFile: this.item.imageFile,
        route: this.routeStr,
        authTime: this.authTime,
      };
    },
  },

  watch: {},
  created() {
    this.reader = new FileReader();
    this.reader.onload = (e) => {
      this.imgBase = e.target.result;
    };
    setTimeout(() => {
      if (this.item.avatar) this.iconImage = this.item.avatar;
      if (this.item.route) {
        this.item.route.split(",").forEach((i) => {
          this.allRouter.forEach((t) => {
            if (i === t.path) this.routers = [...this.routers, t.meta.title];
          });
        });
      }
    }, 500);
  },
  methods: {
    checkboxChange(value) {
      let routers = "";
      value.forEach((i) => {
        this.allRouter.forEach((t) => {
          if (i === t.meta.title) routers += t.path + ",";
        });
      });
      this.routeStr = routers.substring(0, routers.length - 1);
    },
    handleBackClick() {
      this.$router.go(-1);
    },
    handleSubmitClick() {
      this.$emit("doSubmit");
    },
    valid(callback) {
      this.$refs["moForm"].validate((valid) => {
        callback(valid);
      });
    },
    setImg() {
      const target = document.getElementById("fileInput");
      target && target.click();
    },
    imgChange(e) {
      console.log(this.routers, "luyou");
      console.log(e);
      const img = e.target.files[0];
      if (img.size / 1024 < 2 * 1024) {
        this.reader.readAsDataURL(img);
        this.item.imageFile = img;
        setTimeout(() => {
          const pos = this.imgBase.indexOf("base64") + 7;
          this.imgBase = this.imgBase.substr(pos);
          this.iconImage = "data:image/png;base64," + this.imgBase;
        }, 500);
      } else {
        this.$message.error("图片大小不可超过2M");
      }
      this.$refs["moForm"].validateField("imageFile");
    },
  },
};
</script>

<style scoped>
#fileInput {
  width: 0;
  height: 0;
  overflow: hidden;
}

.setimg {
  float: left;
  margin-left: 0;
}

.imgbox {
  border: 1px solid #eee;
  width: 200px;
  height: auto;
}

.imgbox img {
  align: center;
  max-width: 100%;
}

.imginfo {
  font-size: 12px;
  color: #666;
}
</style>
